<template>
  <div>
    <h2 class="titleHeader">修改个人信息</h2>
    <div id="frontHome">
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="电  话">
          <el-input v-model="form.tel"></el-input>
        </el-form-item>

        <el-form-item label="微  信">
          <el-input v-model="form.wechat"></el-input>
        </el-form-item>

        <el-form-item label="Q   Q">
          <el-input v-model="form.qq"></el-input>
        </el-form-item>

        <el-form-item label="昵  称">
          <el-input v-model="form.uname"></el-input>
        </el-form-item>

        <el-form-item label="座右铭">
          <el-input v-model="form.motto"></el-input>
        </el-form-item>
        <el-form-item label="现在地址">
          <el-input v-model="form.location"></el-input>
        </el-form-item>

        <el-form-item style=" text-align: right;">
          <el-button type="primary" @click="onSubmit">
            立即修改
          </el-button>

        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      form: {
        tel: '',
        wechat: '',
        qq: '',
        motto: '',
        uname: '',
        location: ''
      }
    }
  },
  mounted () {
    this.$axios.get('/endIndex/center').then(res => {
      this.form.tel = res.data?.info[0].tel
      this.form.wechat = res.data?.info[0].wechat
      this.form.qq = res.data?.info[0].qq
      this.form.motto = res.data?.info[0].motto
      this.form.uname = res.data?.info[0].uname
      this.form.location = res.data?.info[0].location
    })
  },
  methods: {
    onSubmit () {
      if (!this.form.tel.trim() || !this.form.wechat.trim() || !this.form.qq.trim() || !this.form.motto.trim()) return this.$message.error('不能为空')
      this.$axios.post('/endIndex/center', {
        tel: this.form.tel,
        wechat: this.form.wechat,
        qq: this.form.qq,
        motto: this.form.motto,
        uname: this.form.uname,
        location: this.form.location,
        token: localStorage.getItem('token')
      }).then(res => {
        if (res.data.ok) {
          this.$message({
            message: res.data.info,
            type: 'success'
          })
        } else {
          this.$message.error(res.data.info)
        }
      })
    }
  }
}
</script>

<style>
#frontHome {
  width: 90%;
  margin: 30px auto;
  background: #fff;
  padding: 100px;
}
</style>
